<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="logRegister"
    width="850"
    title="查看日志详情"
    :showOkBtn="false"
    cancelText="关闭"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <div class="drawer-item">
        <div class="item-label">请求名称</div>
        <div class="item-value">{{ drawerState.record.requestName }}</div>
      </div>
      <div class="drawer-item">
        <div class="item-label">请求URL</div>
        <div class="item-value">{{ drawerState.record.uri }}</div>
      </div>
      <div class="drawer-item">
        <div class="item-label">类名/方法名</div>
        <div class="item-value">{{ drawerState.record.method }}</div>
      </div>
      <div class="drawer-item">
        <div class="item-label">操作账号</div>
        <div class="item-value">{{ drawerState.record.userAcct }}</div>
      </div>
      <div class="drawer-param">
        <div class="param-name">请求参数</div>
        <div class="param-content">
          <div class="content-code">
            <div class="code-copy" @click="copyTxt('request')">
              <copy-outlined />
            </div>
            <Codemirror
              v-model="drawerState.record.requestBodys"
              :style="{ height: '200px' }"
              :autofocus="true"
              :indent-with-tab="true"
              disabled
              :tabSize="2"
              :extensions="jsonExtensions"
            />
          </div>
        </div>
      </div>
      <div class="drawer-param">
        <div class="param-name">响应参数</div>
        <div class="param-content">
          <div class="content-code">
            <div class="code-copy" @click="copyTxt('response')">
              <copy-outlined />
            </div>
            <Codemirror
              v-model="drawerState.record.returnJson"
              :style="{ height: '200px' }"
              :autofocus="true"
              :indent-with-tab="true"
              disabled
              :tabSize="2"
              :extensions="jsonExtensions"
            />
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { ReloadOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import { Codemirror } from 'vue-codemirror'
import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'
import { LogRecord } from '@/types/system'
import useClipboard from 'vue-clipboard3'

const emit = defineEmits(['register'])

const jsonExtensions = [json(), oneDark]

const drawerState = reactive<{ record: Partial<LogRecord> }>({
  record: {}
})

const { toClipboard } = useClipboard()
const [logRegister, { closeDrawer, changeLoading }] = useDrawerInner((data) => {
  let record = cloneDeep(data.record)
  if (record.requestBodys) {
    record.requestBodys = JSON.stringify(JSON.parse(record.requestBodys), null, '\t')
  }
  if (record.returnJson) {
    record.returnJson = JSON.stringify(JSON.parse(record.returnJson), null, '\t')
  }
  drawerState.record = record || {}
})

// 内容复制
const copyTxt = async (type: string) => {
  let copyStr = ''
  if (type === 'request' && drawerState.record.requestBodys) {
    copyStr = drawerState.record.requestBodys
  } else if (type === 'response' && drawerState.record.returnJson) {
    copyStr = drawerState.record.returnJson
  }
  await toClipboard(copyStr)
  message.success('复制成功')
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 8px 4px;
  .drawer-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .item-label {
      width: 100px;
      color: #979ca7;
    }
  }
  .drawer-param {
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .param-name {
      color: #979ca7;
      margin-bottom: 4px;
    }
    .param-content {
      .content-code {
        position: relative;
        .code-copy {
          display: none;
          position: absolute;
          right: 20px;
          top: 12px;
          color: #fafafa;
          font-size: 20px;
          z-index: 5;
          cursor: pointer;
        }
        &:hover .code-copy {
          display: block;
        }
      }
    }
  }
}
</style>
